

<div class="elasticsuite-admin-product-sorter" data-bind="if: enabled">

    <div data-role="spinner" class="admin__data-grid-loading-mask" visible="loading" if="showSpinner">
        <div class="spinner"><span repeat="8"></span></div>
    </div>

    <input type="hidden" data-bind="value: value, attr: {name: inputName}"/>

    <span class="title" data-bind="text: label"></span>

    <div class="elasticsuite-admin-product-sorter-preview-mode" data-bind="if: hasProducts()">
        <div class="message message-info" visible="previewOnlyMode">
            <div data-bind="html: messages.previewOnlyModeText"></div>
        </div>
    </div>

    <div class="admin__field" data-bind="if: allowSearch && (hasProducts() || hasSearch())">
        <label class="admin__field-label" data-bind="text: messages.searchLabel"></label>
        <div class="admin__field-control">
            <p class="top-search">
                <input type="text" id="elasticsuite-preview-search" class="admin__control-text" data-bind="textInput : search, event: {keypress: enterSearch}"/>
                <a href="#" data-bind="click: searchProducts, text: messages.search" class="action-default action-search"></a>
                <a href="#" data-bind="click: resetSearch, text: messages.clearSearch, visible: search" class="action-reset"></a>
            </p>
        </div>
    </div>

    <div class="elasticsuite-admin-product-sorter-empty" data-bind="if: !hasProducts()">
        <div class="message message-info">
            <div data-bind="html: messages.emptyText" visible="!hasSearch()"></div>
            <div data-bind="html: messages.noResultsText" visible="hasSearch()"></div>
        </div>
    </div>

    <div data-bind="if: hasProducts()">

        <div class="product-list-container">
            <div class="admin__data-grid-loading-mask" visible="previewOnlyMode"></div>
            <button id="reset-all-products" type="button" class="action-default action-secondary scalable reset" data-bind="title: messages.resetAllText, click: resetAllProducts" data-ui-id="adminhtml-product-sorter-reset-button">
                <span text="messages.resetAllText"></span>
            </button>
            <ul data-bind="foreach: products, afterRender: enableSortableList" class="product-list">
                <li class="product-list-item" data-bind="
                    attr: {'data-product-id': getId()},
                    css: {'manual-sorting': hasPosition() && canUseManualSort(), 'automatic-sorting': !canUseManualSort() || !hasPosition(), 'blacklisted': isBlacklisted() }
                ">
                    <div class="draggable-handle" data-bind="if: hasPosition() && canUseManualSort()"></div>
                    <div class="blacklist-handle" data-bind="if: $parent.allowBlacklist">
                        <a data-bind="click: $parent.toggleBlackListed.bind($parent), attr: { title: isBlacklisted() ? $t('Blacklisted') : $t('Visible') }"></a>
                    </div>

                    <div class="product-image"><img data-bind="attr: { src: getImageUrl() }" /></div>

                    <div class="info-wrapper">
                        <div class="info">
                            <h1><span data-bind="text: getName(), attr: {title: getName()}"></span></h1>
                            <p class="sku" data-bind="text: getSku()"></p>
                            <p class="price" data-bind="text: getFormattedPrice()"></p>
                            <p class="stock" data-bind="text: getStockLabel()"></p>
                        </div>

                        <div class="admin__actions-switch" data-role="switcher" data-bind="visible: canUseManualSort(), click: $parent.toggleSortType.bind($parent)">
                            <input type="checkbox" class="admin__actions-switch-checkbox" simple-checked="hasPosition()" ko-value="hasPosition()" />
                            <label class="admin__actions-switch-label">
                                <span class="admin__actions-switch-text"
                                      attr="'data-text-on': $parent.messages.manualSort, 'data-text-off': $parent.messages.automaticSort">
                                  </span>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <p class="bottom-links" data-bind="visible: hasMoreProducts()">
            <a href="#" data-bind="click: showMoreProducts, text: messages.showMore" class="show-more-link"></a>
        </p>
    </div>
</div>
